<template>
  <div>
    <!-- width使用百分比, max-width使用具体的xxxpx , 用以适配小屏幕的PC端 -->
    <el-dialog
      :title="title"
      v-model="visable"
      width="45%"
      :close-on-click-modal="false"
      :draggable="true"
    >
      <div class="bs-dialog">
        <el-form
          ref="addRef"
          :model="dialogFormData"
          :rules="dialogFormRules"
          label-width="auto"
          style="width: 90%;padding-left: 5%;text-align: left;"
        >
        <el-row>
          <el-col :span="12">
            <el-form-item label="品种名称:" prop="name1">
              <el-input v-model="dialogFormData.name1" placeholder="请输入品种名称" :disabled="true" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="品种代码:" prop="code1">
              <el-input v-model="dialogFormData.code1" placeholder="请输入品种代码" :disabled="true" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="品种类别:" prop="varietyType1">
              <el-input v-model="dialogFormData.varietyType1" placeholder="请输入品种类别" :disabled="true" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="交易单位:" prop="volumeMultiple1">
              <el-input-number v-model="dialogFormData.volumeMultiple1" placeholder="请输入交易单位" :disabled="true" clearable/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="标的代码:" prop="code2">
              <template v-for="item2 in dialogFormData.codeList2" :key="item2">
                <el-input :value="item2" placeholder="请输入标的代码"  :disabled="true" clearable />
              </template>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="保证金比率:" prop="tradeMarginRate2">
              <el-input-number v-model="dialogFormData.tradeMarginRate2" :max="1" placeholder="请输入保证金比率"  :disabled="true" clearable/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="期权合约:" prop="codeList">
              <template v-for="(item,index) in dialogFormData.codeList" :key="index">
                <el-input v-model="dialogFormData.codeList[index]" placeholder="请输入期权合约" class="codeItem"  clearable />
                <el-button title="删除期权合约" type="danger" plain @click="minusCode(index)" :disabled="updateFlag"
                 style="width: 7%;padding-right: 3%;margin-left: 2%;">
                  <el-icon><Minus /></el-icon>
                </el-button>
              </template>
              <el-button title="添加期权合约" :disabled="updateFlag" style="width: 100%;margin: 0;margin-top: 5px;" @click="addCode"><el-icon><Plus /></el-icon></el-button>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="行情代码:" prop="lastPriceCode">
              <el-input v-model="dialogFormData.lastPriceCode" placeholder="请输入行情代码"  clearable />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="订阅行情:" prop="subscriptionFlag"  style="text-align: left;">
              <el-radio-group v-model="dialogFormData.subscriptionFlag">
                <el-radio :value="1">是</el-radio>
                  <el-radio :value="0">否</el-radio>
                </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      </div>
      <template #footer>
        <div class="dialog-footer" style="text-align: right;margin-right: 7.5%;">
          <el-button  size="small" @click="visable = false"> 取消 </el-button>
          <el-button  size="small" type="primary" @click="save"> 保存 </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { addInstrument, updateInstrument, getInstrumentByID } from '@/api/oss/instrument.js'
// (修改和新增共用一个弹窗时,this.$refs['xxx'].resetFields()函数失效, 因此使用这种方式重置表单数据)
let orgDialogFormData = {
        id: undefined,
        pid:undefined,
        codeList:undefined,
        lastPriceCode:undefined,
        subscriptionFlag:1,
        // 新增二级
        level:3,
        // 下面是一级的信息
        code1:undefined,
        name1:undefined,
        varietyType1:undefined,
        volumeMultiple1:undefined,
        // 下面是二级信息
        code2:undefined,
        name2:undefined,
        codeList2:[],
        tradeMarginRate2:undefined,
      }
export default {
  data() {
    return {
      title:"",
      visable: false,
      dialogFormData: { ...orgDialogFormData},
      dialogFormRules: {
        code: [
          { required: true, message: '请输入标的代码', trigger: ['blur', 'change'] },
        ],
        tradeMarginRate: [
          { required: true, message: '请输入保证金比率', trigger: ['blur', 'change'] },
        ],
      },
      // 是否修改
      updateFlag:false,
    }
  },
  methods: {
    // 添加一个元素
    addCode(){
      this.dialogFormData.codeList.push('')
    },
    // 删除指定位置的元素
    minusCode(index){
      this.dialogFormData.codeList.splice(index,1)
    },
    // id2二级ID , 一级的ID
    openModal(id2,updateId) {
      console.log("新增三级=",id2,updateId);
      this.visable = true
      this.$nextTick(() => {
        this.dialogFormData = {...orgDialogFormData}
        this.dialogFormData.codeList = []
        this.dialogFormData.pid = id2
        
        if (this.isNotBlank(updateId)) {
          this.updateFlag = true
          this.title = '修改期权合约信息'
          // 获取修改的信息
          getInstrumentByID({ 'id': updateId }).then(res => {
            console.log("修改返回值=",res);
            if (res.code === 1) {
              // 回填三级信息
              this.dialogFormData = {...res.data.vo3}
              this.dialogFormData.codeList = [res.data.vo3.code]

              // 回填一级信息
              this.dialogFormData.code1 = res.data.vo1.code
              this.dialogFormData.name1 = res.data.vo1.name
              this.dialogFormData.varietyType1 = res.data.vo1.varietyType
              this.dialogFormData.volumeMultiple1 = res.data.vo1.volumeMultiple
              // 回填二级信息
              this.dialogFormData.tradeMarginRate2 = res.data.vo2.tradeMarginRate
              this.dialogFormData.subscriptionFlag2 = res.data.vo2.subscriptionFlag
              this.dialogFormData.codeList2 = [res.data.vo2.code]
              this.dialogFormData.tradeMarginRate2 = res.data.vo2.tradeMarginRate
            }
          })
        } else {
          // 获取一级二级的信息
          getInstrumentByID({ 'id': id2 }).then(res => {
            console.log("修改返回值=",res);
            if (res.code === 1) {
              // 回填一级信息
              this.dialogFormData.code1 = res.data.vo1.code
              this.dialogFormData.name1 = res.data.vo1.name
              this.dialogFormData.varietyType1 = res.data.vo1.varietyType
              this.dialogFormData.volumeMultiple1 = res.data.vo1.volumeMultiple
              // 回填二级信息
              this.dialogFormData.tradeMarginRate2 = res.data.vo2.tradeMarginRate
              this.dialogFormData.subscriptionFlag2 = res.data.vo2.subscriptionFlag
              this.dialogFormData.codeList2 = [res.data.vo2.code]
              this.dialogFormData.tradeMarginRate2 = res.data.vo2.tradeMarginRate
            }
          })
          this.updateFlag = false
          this.title = '新增期权合约信息'
        }
      })
    },
    
    // 保存
    save() {
      this.$refs['addRef'].validate((valid) => {
        if (valid) {
          if (this.isBlank(this.dialogFormData.id)) {
            addInstrument(this.dialogFormData).then(res => {
              if (res.code == 1) {
                this.$message.success('操作成功')
                this.visable = false
                // 刷新父组件中的表格数据
                this.$emit('flushTable', {})
              } else {
                this.$message.error(res.msg)
              }
            }).catch((error) => {
            })
          } else {
            updateInstrument(this.dialogFormData).then(res => {
              if (res.code == 1) {
                this.$message.success('操作成功')
                this.visable = false
                // 刷新父组件中的表格数据
                this.$emit('flushTable', {})
              } else {
                this.$message.error(res.msg)
              }
            }).catch((error) => {
            })
          }
          

        }
      })
    },

  }
}
</script>
<style scoped>
  /deep/.el-drawer__title {
    text-align: left;
  }
  :deep(.el-form-item__content) {
    display: inline-block;
    text-align: left;
    padding-right: 10%;
  }
  /deep/.el-drawer__title {
    text-align: left;
  }
  :deep(.el-input),
  :deep(.el-input-number--small) {
    width: 100%;
  }
  .codeItem {
    width: 90%;
  }
</style>
